<template>
  <view class="refund">
    <view class="money-section">
      <view class="acea-row row-middle item">
        <view class="">预计退款</view>
        <input disabled="" v-model="refundMoney" class="input" type="text"/>
      </view>
      <view class="acea-row row-middle item">
        <view class="">退款类型</view>
        <view class="acea-row row-right radio-group">
          <view class="acea-row row-middle radio-item" :class="{ on: !isSplit}" @click="refundTypeChange(0)">
            <text class="iconfont" :class="isSplit?'icon-weixuanzhong':'icon-a-ic_CompleteSelect'"></text>
            整单退款
          </view>
          <view v-if="type!=2" class="acea-row row-middle radio-item" :class="{ on: isSplit}"
                @click="refundTypeChange(1)">
            <text class="iconfont" :class="isSplit?'icon-a-ic_CompleteSelect':'icon-weixuanzhong'"></text>
            分单退款
          </view>
        </view>
      </view>
    </view>
    <splitOrder :type="1" v-if="isSplit" :splitGoods="splitGoods" :select_all="false" @getList="getList">
    </splitOrder>
    <view class="footer acea-row row-middle">
      <view class="all acea-row row-middle" v-if="isSplit" @click="allChange">
        <text class="iconfont" :class="isAll?'icon-a-ic_CompleteSelect':'icon-ic_unselect'"></text>
        全选
      </view>
      <view class="btn-box">
        <view class="btn" :style="{ width: isSplit?'auto':'100%'}" @click="openRefund">
          确认
          <text v-if="isSplit">({{ numTotal }})</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import splitOrder from '../components/splitOrder/index.vue';
import {
  employeeDirectRefund,
  sendDetailList
} from '@/api/work.js'

export default {
  components: {
    splitOrder,
  },
  data() {
    return {
      refundMoney: 0,
      isSplit: 0,
      isAll: false,
      splitGoods: [],
      goodsChecked: [],
      cart_ids: [],
      info: {},
      orderNo: '',
      type: ''
    }
  },
  computed: {
    total() {
      return this.goodsChecked.reduce((total, item) => {
        return this.$util.$h.Add(total, this.$util.$h.Mul(this.$util.$h.Div(item.payPrice, item.payNum), item.surplus_num)).toFixed(2);
      }, 0);
    },
    numTotal() {
      return this.goodsChecked.reduce((total, {
        surplus_num,
      }) => {
        return this.$util.$h.Add(total, surplus_num);
      }, 0);
    },
  },
  watch: {
    total(newValue, oldValue) {
      this.refundMoney = newValue
    },
  },
  onLoad(options) {
    this.getInfo(options.orderNo)
    this.orderNo = options.orderNo
    this.type = options.type
  },
  methods: {
    getInfo(orderNo) {
      sendDetailList(orderNo).then(res => {
        this.info = res.data
        this.getIndex(res.data)
      })
    },
    allChange() {
      this.isAll = !this.isAll;
      this.cart_ids = [];
      this.goodsChecked = [];
      for (let i = 0; i < this.splitGoods.length; i++) {
        this.splitGoods[i].checked = this.isAll;
        if (this.splitGoods[i].checked) {
          this.goodsChecked.push(this.splitGoods[i]);
          this.cart_ids.push(this.splitGoods[i].id);
        }
      }
    },
    refundTypeChange(value) {
      this.isSplit = value;
      if (value) {
        this.goodsChecked = []
        this.splitGoods.forEach(item => {
          item.checked = false
        })
        this.isAll = false
      } else {
        this.splitGoods.forEach(item => {
          item.surplus_num = item.payNum - item.refundNum
        })
        this.goodsChecked = this.splitGoods
      }
    },
    getIndex(info) {
      let that = this;
      let obj = '';
      const cartInfo = info
      let list = cartInfo.map(item => {
        return {
          id: item.id,
          checked: false,
          numShow: item.payNum - item.refundNum,
          surplus_num: item.payNum - item.refundNum,
          ...item,
          refundPrice: this.$util.$h.Div(item.refundPrice, item.payNum),
        };
      });
      this.splitGoods = list;
      this.goodsChecked = list;

    },
    getList(val) {
      let that = this;
      that.splitGoods = JSON.parse(JSON.stringify(val));
      let goodsChecked = [];
      let cart_ids = [];
      for (let i = 0; i < val.length; i++) {
        if (val[i].checked) {
          goodsChecked.push(val[i]);
          cart_ids.push(val[i].id);
        }
      }
      this.goodsChecked = goodsChecked;
      this.cart_ids = cart_ids;
      this.isAll = this.goodsChecked.length == this.splitGoods.length;
    },
    openRefund() {
      let cart_ids = [];
      let data = {
        refund_price: this.refundMoney,
        type: 1,
        is_split_order: this.isSplit,
      };
      cart_ids = this.goodsChecked.map(({
                                          id,
                                          surplus_num
                                        }) => {
        return {
          orderDetailId: id,
          num: surplus_num
        }
      });
      let refundObj = {
        orderNo: this.orderNo,
        returnType: this.isSplit == 0 ? 1 : 2,
        detailList: cart_ids
      }
      employeeDirectRefund(refundObj).then(res => {
        if (res.code == 200) {
          this.$util.Tips({
            title: '操作成功'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/admin/order/index?type=complete'
            })
          }, 500)
        }
      }).catch(err => {
        this.$util.Tips({
          title: err
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border: 1px solid #2A7EFB !important;
  background-color: #2A7EFB !important;
  color: #fff !important;
}

::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border: 1px solid #2A7EFB !important;
  background-color: #2A7EFB !important;
  color: #fff !important;
}

.refund {
  padding: 22rpx 20rpx;
}

.money-section {
  padding: 12rpx 0;
  border-radius: 24rpx;
  background: #FFFFFF;

  .item {
    height: 80rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333333;
  }

  .input {
    flex: 1;
    height: 80rpx;
    text-align: right;
    font-family: Regular;
    font-size: 36rpx;
    color: #FF7E00;
  }

  .icon-ic_edit {
    margin-left: 8rpx;
    font-size: 32rpx;
    color: #999999;
  }

  .radio-group {
    flex: 1;
  }

  .radio-item {
    font-size: 28rpx;
    color: #999999;

    + .radio-item {
      margin-left: 48rpx;
    }

    .iconfont {
      margin-right: 12rpx;
      font-size: 32rpx;
    }

    &.on {
      color: #333333;

      .iconfont {
        color: #2A7EFB;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16rpx 20rpx 16rpx 32rpx;
  padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  background: #FFFFFF;

  .btn {
    display: inline-block;
    height: 64rpx;
    padding: 0 40rpx;
    border-radius: 32rpx;
    background: #2A7EFB;
    font-weight: 500;
    font-size: 26rpx;
    line-height: 64rpx;
    color: #FFFFFF;
  }

  .all {
    font-size: 26rpx;
    color: #333333;

    .iconfont {
      margin-right: 12rpx;
      font-size: 40rpx;
      color: #CCCCCC;

      &.icon-a-ic_CompleteSelect {
        color: #2A7EFB;
      }
    }
  }

  .btn-box {
    flex: 1;
    text-align: right;

    .btn {
      text-align: center;
    }
  }
}
</style>